﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>6-4 toRef 以及 context 参数</title>
    <link rel="stylesheet" href="../../css/bootstrap.css"/>
    <script src="../../js/jquery-2.2.0.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
</head>
<body>
<h1>6-4 toRef 以及 context 参数</h1>

<div id="app">
    <div>
        <p>我是obj.name:{{obj.name}}</p>
        <p>我是name:{{name}}</p>
        <p>我不是toRefs里的name，是直接从obj里解构出来的{{name2}}</p>
        <p>我是toRef里的age:{{age}}</p>
    </div>
</div>
<script src="../../js/vue-3.2.26.js"></script>
<script src="../../node_modules/axios/dist/axios.js"></script>
<script src="../../node_modules/lodash/lodash.js"></script>

<script>

    // 引了vue.js会存在一个Vue的全局变量
    const app = Vue.createApp({
        /**
         * CompositionAPI 中 setup函数在created之前，所以在这个函数中的内容没有this
         * method里可以调setup中的方法和使用里面的数据，原因就是它在create之前执行的
         */

        setup(props,context){
            const {reactive,toRefs,toRef} = Vue;
            const obj = reactive({ name:'kyo' });
            // 回顾一下之前的toRefs的情况 它是一个函数
            // 因为是响应式的，这里从toRefs里解构出来的name只要发生变化，obj里的name也是实时变化的。
            // 如果不用toRefs直接从obj里结构出来，就不是响应式了
            let {name} = toRefs(obj);
            // let {name} = obj;
            setTimeout(()=>{
                name.value = '我是toRefs里2s以后改变的数据';
            },2000);

            // 从toRefs里取age的时候，由于源数据没有age，则页面直接啥都取不到
            // 这时候可以使用toRef，它是一个函数，接收三个参数，一般用前两个较多
            // 直接返回，而不是结构式取
            // toRef不用在源数据里有，一开始可以什么都没有，然后再相当于往里面加属性
            // 建议还是用toRefs 结构式，在源数据一开始就写上age给上默认值，因为源数据声明了以后，更清晰，好维护些
            let age = toRef(obj,'age');
            setTimeout(()=>{
                age.value = 18;
            },2000);
            return {
                obj,
                name,
                age
            }
        }
    });
    const vm = app.mount('#app');

</script>

</body>
</html>
